<template>
    <div :class="fullPage?'video-container__wrap-fix':'video-container__wrap'" @mouseover="mShowVideoContainerBottom" @mouseleave="mHideVideoContainerBottom" ref="videoCon" @contextmenu="showContextmenu">
      <video ref="video" class="video"   :src="src"  @click="clickToPlay">

      </video>

      <div class="advertise-container" v-if="!play">
        <transition name="fadeIcon">
          <div class="play__btn" v-if="!play" @click="clickToPlay">
            <yun-icon  name="play"  pb="7px" ></yun-icon>
          </div>
        </transition>
<!--        <transition name="fadeIcon">-->

<!--        <div class="play__btn" v-if="play">-->
<!--          <yun-icon  name="pause"  pb="7px" @click.native="clickToPlay"></yun-icon>-->
<!--        </div>-->
<!--        </transition>-->
      </div>

      <div class="contextmenu-container">

      </div>

      <div class="video-container__left">

      </div>

      <div class="video-container__right">

      </div>
      <div class="video-container__top">

      </div>
      <div class="video-container__bottom" v-if="showVideoContainerBottom">
        <div class="process-container" @click="clickVideo">
          <div class="video-drag__btn" :style="{left:videoProcess}" @mousedown="dragVideo"></div>
          <div class="video-process__line" @click="clickVideo" :style="{width:videoProcess}" ></div>
        </div>

        <div class="bottom-container">

          <div class="bottom__left">
              <yun-icon class="play__btn" name="play" v-if="!play" @click.native="clickToPlay"></yun-icon>
              <yun-icon class="pause__btn" name="pause" v-if="play" @click.native="clickToPlay"></yun-icon>
              <p class="process__word"><span>{{currentTimePacked}}</span>/{{durationPacked}}</p>
          </div>
          <div class="bottom__right">
            <p class="speed-button"  @mouseleave="mouseLeaveToHideSpeedBox" @mouseover="mouseOverToShowSpeedBox" >倍速</p>
            <yun-icon name="volume" @click="volume=0" @mouseleave.native="mouseLeaveToHideVolumeBox" @mouseover.native="mouseOverToShowVolumeBox" v-if="volume!==0"></yun-icon>
            <yun-icon name="mute" @click="volume=0.5" @mouseleave.native="mouseLeaveToHideVolumeBox" @mouseover.native="mouseOverToShowVolumeBox" v-if="volume===0"></yun-icon>
<!--            <yun-icon name="setting"></yun-icon>-->
            <yun-icon name="fullScreen2" @click.native="FullPage"></yun-icon>
            <yun-icon name="fullScreen1" @click.native="FullScreen"></yun-icon>
          </div>

          <div class="abs__setting-box">

          </div>
            <div class="abs__volume-box" @mousedown="dragVolume" v-if="showVolumeBox" @mouseover="mouseOverToShowVolumeBox" @mouseleave="mouseLeaveToHideVolumeBox">
              <div class="process__volume" @mousedown="dragVolume" >
                <div class="drag__btn" @mousedown="dragVolume" :style="{bottom:volumeProcess}"></div>
                <div class="process__line" @mousedown="dragVolume" :style="{height:volumeProcess}"></div>
              </div>
            </div>


          <div class="abs__speed-box" v-if="showSpeedBox" @mouseleave="mouseLeaveToHideSpeedBox" @mouseover="mouseOverToShowSpeedBox">
            <p :style="playbackRate===0.5?{color:'#00AAE6'}:''"  @click="playbackRate=0.5">0.5x</p>
            <p :style="playbackRate===1?{color:'#00AAE6'}:''"   @click="playbackRate=1">1.0x</p>
            <p :style="playbackRate===1.25?{color:'#00AAE6'}:''"   @click="playbackRate=1.25">1.25x</p>
            <p :style="playbackRate===1.5?{color:'#00AAE6'}:''"   @click="playbackRate=1.5">1.5x</p>
            <p :style="playbackRate===2?{color:'#00AAE6'}:''"   @click="playbackRate=2">2.0x</p>

          </div>
        </div>


      </div>
    </div>
</template>


<script>

  const DEFAULT_EVENTS = [
    'loadeddata',
    'canplay',
    'canplaythrough',
    'play',
    'pause',
    'waiting',
    'playing',
    'ended',
    'error'
  ];


  export default{
    name:'yunVideo',

    data(){
      return{
        play:false,
        volume:0.5,
        playbackRate:1.0,
        showVideoContainerBottom:false,
        showVideoContainerBottomTime:null,
        showVolumeBox:false,
        showVolumeBoxTime:null,
        showSpeedBox:false,
        showSpeedBoxTime:null,
        currentTime:0,
        duration:0,
        src:'',
        fullPage:false,
        canBeControl:true,
        fullScreen:false
      }
    },

    props:{
      dataSrc:String,
    },

    computed:{
      volumePacked(){

      },
      videoProcess(){
        if(process.browser){
          if(this.duration){
            const boxWidth = this.$refs.videoCon.offsetWidth;
            return `${this.currentTime/this.duration*100*(boxWidth-10)/boxWidth}%`;
          }else{
            return '0%'
          }
        }

      },

      volumeProcess(){
        return `calc(${this.volume*100}% - 8px)`
      },

      currentTimePacked(){
        let currentTime = this.currentTime;
        let min = Math.floor(currentTime/60)>9?Math.floor(currentTime/60):`0${Math.floor(currentTime/60)}`;
        let sec = Math.floor(currentTime - min*60)>9?Math.floor(currentTime - min*60):`0${Math.floor(currentTime - min*60)}`;
        return `${min}:${sec}`
      },
      durationPacked(){
        let duration = this.duration;
        let min = Math.floor(duration/60)>9?Math.floor(duration/60):`0${Math.floor(duration/60)}`;
        let sec = Math.floor(duration - min*60)>9?Math.floor(duration - min*60):`0${Math.floor(duration - min*60)}`;
        return `${min}:${sec}`
      }
    },

    created() {
      if(process.browser){
       // this.src = ' https://v-cdn.zjol.com.cn/280443.mp4';
         this.src = this.dataSrc;
        setTimeout(()=>{
          this.$refs.video.volume = this.volume;
          this.$refs.video.oncontextmenu = function () {
            return false
          };
        });

        this.autoPlay();
      }
    },
    destroyed(){

      // firefox,opera
      document.removeEventListener('keypress',this.forbidBackSpace)
      // ie , Chrome
      document.removeEventListener('keydown',this.forbidBackSpace);
    },

    watch:{
      play(val){
        if(process.browser){
          if(val===true){
             this.$refs.video.play();
             // this.videoProcessTime = setInterval(()=>{
             //
             //   if(currentTime<duration){
             //     this.currentTime = this.currentTime +0.1;
             //   }else if(currentTime>duration){
             //     this.currentTime = duration;
             //     clearInterval(this.videoProcessTime);
             //   }else if(currentTime===duration){
             //     this.currentTime = 0;
             //     clearInterval(this.videoProcessTime);
             //   }
             //
             // },100);
             // this.$refs.video.on('timeupdate',()=>{
             // })
            let that = this;
            this.$refs.video.addEventListener('timeupdate',()=>{
              this.currentTime = this.$refs.video.currentTime;
            })
          }else{
            this.$refs.video.pause();
            let {currentTime,duration} = this;
            if(currentTime<duration){
              clearInterval(this.videoProcessTime);
            }else if(currentTime>=duration){
              this.currentTime = 0;
              clearInterval(this.videoProcessTime);
            }
          }
        }

      },
      volume(val){
        if(process.browser) {
          this.$refs.video.volume = val;
        }
      },
      fullScreen(val){
        if(val){
          if(process.browser){
            let  ele = this.$refs.videoCon;
            if (ele .requestFullscreen) {
              ele .requestFullscreen();
            } else if (ele .mozRequestFullScreen) {
              ele .mozRequestFullScreen();
            } else if (ele .webkitRequestFullScreen) {
              ele .webkitRequestFullScreen();
            }
          }
        }else{
          if(process.browser){
            let  de = document;
            if (de.exitFullscreen) {
              de.exitFullscreen();
            } else if (de.mozCancelFullScreen) {
              de.mozCancelFullScreen();
            } else if (de.webkitCancelFullScreen) {
              de.webkitCancelFullScreen();
            }
          }
        }
      },
      playbackRate(val){
        if(process.browser) {
          this.$refs.video.playbackRate = val;
        }
      },
      src(val){
        if(process.browser){
          let that = this;
          this.$refs.video.onloadedmetadata  = function () {
            that.duration = this.duration;
            that.currentTime = this.currentTime;
          }

        }
      },

    },

    methods:{
      //取消页面的空格键
      forbidBackSpace(e){

        let ev = e || window.event;  //获取event对象
        let obj = ev.target || ev.srcElement;  //获取事件源

        let t = obj.type || obj.getAttribute('type');//获取事件源类型
        //当桥backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效
        //判断
        if(ev.keyCode ===13 &&t!=="password"&&t!=="text"&&t!=="textarea"){   //阻止回车键默认事件
          e.stopPropagation();    // 阻止事件冒泡传递
          e.preventDefault();
        }
        if(ev.keyCode ===32 &&t!=="password"&&t!=="text"&&t!=="textarea"){   //阻止空格键默认事件
          e.stopPropagation();    // 阻止事件冒泡传递
          e.preventDefault();
          this.canBeControl =false;
          this.play = !this.play

        }

      },

      FullScreen() {
        this.fullScreen = !this.fullScreen;

      },

      FullPage(){
          this.fullPage=!this.fullPage;
      },

      clickToPlay(){
        this.canBeControl = false;
        this.play = !this.play;
      },

      scrollPlay(boolean){
        if(this.canBeControl){
          this.play = boolean
        }else{

        }
      },

      autoPlay(){
        if(process.browser){
          document.addEventListener('scroll',()=>{
            let videoConTop = this.getElementToPageTop(this.$refs.videoCon);
            let scrollTop = document.documentElement.scrollTop;
            let clientHeight = document.documentElement.clientHeight;
            let videoConHeight = this.$refs.videoCon.clientHeight;
             if(scrollTop < videoConTop && videoConTop < (scrollTop + clientHeight - videoConHeight)){
               // firefox,opera
               document.addEventListener('keypress',this.forbidBackSpace);
               // ie , Chrome
               document.addEventListener('keydown',this.forbidBackSpace);
              this.scrollPlay(true)
            }else {
               // firefox,opera
               document.removeEventListener('keypress',this.forbidBackSpace)
               // ie , Chrome
               document.removeEventListener('keydown',this.forbidBackSpace);
               this.canBeControl =true;
               this.play = false;
             }
          })
        }
      },

      getElementToPageTop(el) {
        if(el.parentElement) {//父级元素须为定位元素
          return this.getElementToPageTop(el.parentElement) + el.offsetTop
        }
        return el.offsetTop
      },
      getElementToPageLeft(el) {
        if(el.parentElement) {//父级元素须为定位元素
          return this.getElementToPageLeft(el.parentElement) + el.offsetLeft
        }
        return el.offsetLeft
      },

      showContextmenu(e){
        e.stopPropagation();//阻止传递
        e.preventDefault();//阻止默认事件
      },
      dragVolume(el){
        this.clickVolume(el);
        let disY = el.pageY - el.target.offsetTop;
        let divY =  this.getElementToPageTop(el.target);
        document.onmousemove = (e) => {
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          if(el.target.className==='drag__btn'||el.target.className==='process__line'||el.target.className==='process__volume'){
            let top = e.pageY - disY;
            let bottom = 100 - top;
            if(bottom>=0&&bottom<=100){
              if(bottom<5){
                this.volume = 0
              }else if(bottom >95){
                this.volume =1;
              }else{
                this.volume = bottom/100;

              }
            }
          }
          if(el.target.className==='abs__volume-box'){
            let top = e.pageY - divY;
            if(top>=15&&top<=115) {
              let bottom = 100 - top + 15;
              if (bottom >= 0 && bottom <= 100) {
                if (bottom < 5) {
                  this.volume = 0
                } else if (bottom > 95) {
                  this.volume = 1;
                } else {
                  this.volume = bottom / 100;

                }
              }
            }

          }




          // if(el.target.className==='process__line'){
          //   let top = e.clientY - divY;
          //   let bottom = 100 - top;
          //
          //   if(bottom>=0&&bottom<=100){
          //     if(bottom<5){
          //       this.volume = 0
          //     }else if(bottom >95){
          //       this.volume =1;
          //     }else{
          //       this.volume = bottom/100;
          //
          //     }
          //   }
          // }else if(el.target.className==='process__volume'){
          //
          //   let disY = el.pageY - this.getElementToPageTop(el.target);
          //   let bottom = 100-disY;
          //   if(bottom>=0&&bottom<=100){
          //     if(bottom<5){
          //       this.volume = 0
          //     }else if(bottom >95){
          //       this.volume =1;
          //     }else{
          //       this.volume = bottom/100;
          //
          //     }
          //   }
          //
          // }else if(el.target.className==='abs__volume-box'){
          //   let disY = el.pageY - this.getElementToPageTop(el.target);
          //
          // }
        };
        document.onmouseup = () => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      },
      clickVolume(el){
        el.stopPropagation();
        if(el.target.className==='process__line'){

          let disY = el.pageY - this.getElementToPageTop(el.target);
          let bottom = 100 - disY-el.target.offsetTop;

          if(bottom>=0&&bottom<=100){
            if(bottom<5){
              this.volume = 0
            }else if(bottom >95){
              this.volume =1;
            }else{
              this.volume = bottom/100;

            }
          }
        }else if(el.target.className==='process__volume'){

          let disY = el.pageY - this.getElementToPageTop(el.target);
          let bottom = 100-disY;
          if(bottom>=0&&bottom<=100){
            if(bottom<5){
              this.volume = 0
            }else if(bottom >95){
              this.volume =1;
            }else{
              this.volume = bottom/100;

            }
          }

        }
      },
      mouseOverToShowVolumeBox(){
        clearTimeout(this.showVolumeBoxTime);
        this.showVolumeBox = true;
      },
      mouseLeaveToHideVolumeBox(){
        this.showVolumeBoxTime=setTimeout(()=>{
          this.showVolumeBox = false;
        },200)
      },
      mouseOverToShowSpeedBox(){
        clearTimeout(this.showSpeedBoxTime);
        this.showSpeedBox = true;
      },
      mouseLeaveToHideSpeedBox(){
        this.showSpeedBoxTime=setTimeout(()=>{
          this.showSpeedBox = false;
        },200)
      },
      mShowVideoContainerBottom(){
        clearTimeout(this.showVideoContainerBottomTime);
        this.showVideoContainerBottom = true;
        this.showVideoContainerBottomTime=setTimeout(()=>{
          this.showVideoContainerBottom = false;
        },2000)
      },
      mHideVideoContainerBottom(){
        this.showVideoContainerBottomTime=setTimeout(()=>{
          this.showVideoContainerBottom = false;
        },200)
      },
      clickVideo(el){
        let disX;
        const boxWidth = this.$refs.videoCon.offsetWidth;

        if(el.target.className==='video-process__line'||el.target.className==='video-drag__btn'){
          disX = el.pageX - this.getElementToPageLeft(el.target.parentElement);
        }else{
          disX = el.pageX - this.getElementToPageLeft(el.target);
        }
        let left = disX;
        if(left>=0&&left<=boxWidth){
          if(left<5){
            if(process.browser){
              this.currentTime = 0;
              this.$refs.video.currentTime = 0;
            }
          }else if(left >=boxWidth-5){
            this.currentTime = this.duration;
            if(process.browser){
              this.$refs.video.currentTime = this.duration;
            }
          }else{
            if(process.browser){
              this.currentTime = left/boxWidth * this.duration;
              this.$refs.video.currentTime = left/boxWidth * this.duration;
            }
          }
        }
      },
      dragVideo(el){
        let disX;
        const boxWidth = this.$refs.videoCon.offsetWidth;
        if(el.target.className==='video-process__line'||el.target.className==='video-drag__btn'){
          disX = this.getElementToPageLeft(el.target.parentElement);
        }else{
          disX = this.getElementToPageLeft(el.target);
        }
        this.clickVideo(el);
        document.onmousemove = (e) => {
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.pageX - disX;
          if(left>=0&&left<=boxWidth){
            if(left<5){
              if(process.browser){
                this.currentTime = 0;
                this.$refs.video.currentTime = 0;
              }
            }else if(left >=boxWidth-5){
              this.currentTime = this.duration;
              if(process.browser){
                this.$refs.video.currentTime = this.duration;
              }
            }else{
              if(process.browser){
                this.currentTime = left/boxWidth * this.duration;
                this.$refs.video.currentTime = left/boxWidth * this.duration;
              }
            }
          }
        };
        document.onmouseup = () => {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      },

    }
  }

</script>


<style lang="scss" scoped>
  div{
    position: relative;
  }
  %cancelSelect{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .video-container__wrap{
    position:relative;
    width:768*$length;
    height: 432*$length;
    background-color: #000;
    @extend %flex-row-center;
    @extend %cancelSelect;
    .video{
      width:auto;
      height:auto;
      max-width:100%;
      max-height:100%;
    }

    .advertise-container{
      position:absolute;
      bottom:48*$length;
      top:48*$length;
      left:30*$length;
      right:30*$length;
      z-index: 100;
      /*background-color: rgba(34,34,34,.4);*/
      .play__btn{
        position:absolute;
        margin:0 auto;
        top:50%;
        left:0;
        right:0;
        margin-top: -28*$length;
        width:56*$length;
        height:56*$length;
        border-radius: 50%;
        background-color: rgba(34,34,34,.8);
        @extend %cursorPointer;
        @extend %flex-column-center;
        @extend %animate-transition;
        &:hover{
          transform:scale(1.2);
        }
        i{
          color:#fff;
          font-size: 18*$font-size;
        }


      }
    }


    .video-container__bottom{

      height: 120px;
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      background-image: linear-gradient(0deg,
        rgba(0,0,0,.5) 0,
        rgba(0,0,0,0));

      background-position: 0 bottom;

      background-repeat: repeat-x;
      .process-container{
        height:8*$length;
        width:100%;
        position:absolute;
        bottom:40*$length;
        left:0;
        right:0;
        background-color: rgba(255,255,255,.5);
        @extend %cursorPointer;
        .video-drag__btn{
          position:absolute;
          height:10*$length;
          width:10*$length;
          box-shadow: 0 0 5px 2px #00AAE6;
          left:50%;
          top:-1*$length;
          background-color: #fff;
          border-radius: 50%;
          @extend %cursorPointer;

        }
        .video-process__line{
          width:50%;
          height:100%;
          @extend %cursorPointer;
          background-color: #00AAE6;
        }

      }

      .bottom-container{
        height:38*$length;
        width:100%;
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        color:#fff;
        @extend %flex-row-spb;
        i{
          font-size: 18*$font-size;
        }
        .bottom__left{
          @extend %flex-row-spb;
          justify-content: flex-start;

          i{
            transition: 1s all;
            margin-left: 30*$length;
          }

          .process__word{
            margin-left: 30*$length;
            @include fontStyle(12,38,500,#999,left);
            span{
              color:#fff;
            }
          }

        }
        .bottom__right{
          @extend %flex-row-spb;
          justify-content: flex-end;
          i{
            margin-right: 30*$length;
          }
          .speed-button{
            margin-right: 30*$length;

            position: relative;
            height: 26px;
            padding: 0 12px;
            border-radius: 99em;
            background-color:
              rgba(0,0,0,.5);
            color:
              #ececec;
            line-height: 26px;
            text-align: center;
            white-space: nowrap;
            cursor: pointer;
            @extend %animate-transition;
            &:hover{
              color:#fff;
              background-color: #00AAE6;
            }
          }
        }

        .abs__setting-box{
          position: absolute;
        }

        .abs__volume-box{
          position: absolute;
          z-index: 105;
          right:110*$length;
          bottom:50*$length;
          width:54*$length;
          height:130*$length;
          border-radius: 4*$length;
          background-color: rgb(41,41,41);
          @extend %flex-row-center;
          .process__volume{
            height:100*$length;
            width:6*$length;
            position:relative;
            border-radius: 3*$length;
            background-color: rgb(109,109,109);
            @extend %cursorPointer;

            .drag__btn{
              position:absolute;
              left:0;
              right:0;
              bottom:50%;
              margin-top: -8*$length;
              margin-left: -1*$length;
              width:8*$length;
              height:8*$length;
              border-radius: 4*$length;
              background-color: #fff;
              box-shadow: 0 0 5px 2px #00AAE6;
              @extend %cursorPointer;
            }
            .process__line{
              position:absolute;
              left:0;
              right:0;
              bottom:0;
              width:6*$length;
              height:50%;
              @extend %cursorPointer;
              border-radius: 3*$length;
              background-color: #00AAE6;
            }
          }
        }


        .abs__speed-box{
          position: absolute;
          right:130*$length;
          z-index: 105;

          bottom:50*$length;
          width:146*$length;
          border-radius: 4*$length;
          background-color: rgb(41,41,41);
          p{
            padding:11*$length 0;
            @include fontStyle(14,22,500,#fff,center);
            @extend %cursorPointer;
            @extend %animate-transition;
            &:hover{
              color: #00AAE6;
            }
          }
        }
      }



    }

    .video-container__top{
      height:30px;

      width:100%;
      position:absolute;
      top:0;
      left:0;
      right:0;
    }

    .video-container__left{
      width:30px;
      height:100%;
      position:absolute;
      top:0;
      bottom:0;
      left:0;

    }

    .video-container__right{
      width:30px;

      height:100%;
      position:absolute;
      top:0;
      bottom:0;
      right:0;

    }

  }
  .video-container__wrap-fix{
    top:0;
    left:0;
    position:fixed;
    width:100%;
    height: 100%;
    background-color: #000;
    z-index: 8000;
    @extend %cancelSelect;

    @extend %flex-row-center;
    .video{
      width:auto;
      height:auto;
      max-width:100%;
      max-height:100%;
    }
    .advertise-container{
      position:absolute;
      bottom:48*$length;
      top:48*$length;
      left:30*$length;
      right:30*$length;
      z-index: 100;
      /*background-color: rgba(34,34,34,.4);*/
      .play__btn{
        position:absolute;
        margin:0 auto;
        top:50%;
        left:0;
        right:0;
        margin-top: -28*$length;
        width:56*$length;
        height:56*$length;
        border-radius: 50%;
        background-color: rgba(34,34,34,.8);
        @extend %cursorPointer;
        @extend %flex-column-center;
        @extend %animate-transition;
        &:hover{
          transform:scale(1.2);
        }
        i{
          color:#fff;
          font-size: 18*$font-size;
        }


      }
    }


    .video-container__bottom{

      height: 120px;
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      background-image: linear-gradient(0deg,
        rgba(0,0,0,.5) 0,
        rgba(0,0,0,0));

      background-position: 0 bottom;

      background-repeat: repeat-x;
      .process-container{
        height:8*$length;
        width:100%;
        position:absolute;
        bottom:40*$length;
        left:0;
        right:0;
        background-color: rgba(255,255,255,.5);
        @extend %cursorPointer;
        .video-drag__btn{
          position:absolute;
          height:10*$length;
          width:10*$length;
          box-shadow: 0 0 5px 2px #00AAE6;
          left:50%;
          top:-1*$length;
          background-color: #fff;
          border-radius: 50%;
          @extend %cursorPointer;

        }
        .video-process__line{
          width:50%;
          height:100%;
          @extend %cursorPointer;
          background-color: #00AAE6;
        }

      }

      .bottom-container{
        height:38*$length;
        width:100%;
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        color:#fff;
        @extend %flex-row-spb;
        i{
          font-size: 18*$font-size;
        }
        .bottom__left{
          @extend %flex-row-spb;
          justify-content: flex-start;

          i{
            transition: 1s all;
            margin-left: 30*$length;
          }

          .process__word{
            margin-left: 30*$length;
            @include fontStyle(12,38,500,#999,left);
            span{
              color:#fff;
            }
          }

        }
        .bottom__right{
          @extend %flex-row-spb;
          justify-content: flex-end;
          i{
            margin-right: 30*$length;
          }
          .speed-button{
            margin-right: 30*$length;

            position: relative;
            height: 26px;
            padding: 0 12px;
            border-radius: 99em;
            background-color:
              rgba(0,0,0,.5);
            color:
              #ececec;
            line-height: 26px;
            text-align: center;
            white-space: nowrap;
            cursor: pointer;
            @extend %animate-transition;
            &:hover{
              color:#fff;
              background-color: #00AAE6;
            }
          }
        }

        .abs__setting-box{
          position: absolute;
        }

        .abs__volume-box{
          position: absolute;
          z-index: 105;
          right:110*$length;
          bottom:50*$length;
          width:54*$length;
          height:130*$length;
          border-radius: 4*$length;
          background-color: rgb(41,41,41);
          @extend %flex-row-center;
          .process__volume{
            height:100*$length;
            width:6*$length;
            position:relative;
            border-radius: 3*$length;
            background-color: rgb(109,109,109);
            @extend %cursorPointer;

            .drag__btn{
              position:absolute;
              left:0;
              right:0;
              bottom:50%;
              margin-top: -8*$length;
              margin-left: -1*$length;
              width:8*$length;
              height:8*$length;
              border-radius: 4*$length;
              background-color: #fff;
              box-shadow: 0 0 5px 2px #00AAE6;
              @extend %cursorPointer;
            }
            .process__line{
              position:absolute;
              left:0;
              right:0;
              bottom:0;
              width:6*$length;
              height:50%;
              @extend %cursorPointer;
              border-radius: 3*$length;
              background-color: #00AAE6;
            }
          }
        }


        .abs__speed-box{
          position: absolute;
          right:130*$length;
          z-index: 105;

          bottom:50*$length;
          width:146*$length;
          border-radius: 4*$length;
          background-color: rgb(41,41,41);
          p{
            padding:11*$length 0;
            @include fontStyle(14,22,500,#fff,center);
            @extend %cursorPointer;
            @extend %animate-transition;
            &:hover{
              color: #00AAE6;
            }
          }
        }
      }



    }

    .video-container__top{
      height:30px;

      width:100%;
      position:absolute;
      top:0;
      left:0;
      right:0;
    }

    .video-container__left{
      width:30px;
      height:100%;
      position:absolute;
      top:0;
      bottom:0;
      left:0;

    }

    .video-container__right{
      width:30px;

      height:100%;
      position:absolute;
      top:0;
      bottom:0;
      right:0;

    }

  }
</style>
